<template>
  <div class="flightExecution">
    <div class="container">
      <div class="search-card">
        <div class="search-argument">
          <!-- 姓名 -->
          <div class="search-item">
            <span class="labelName">姓名</span>
            <el-input
              clearable
              v-model="params.operName"
              class="search-input"
              style="width: 270px; height: 40px"
              placeholder="请输入姓名"
            ></el-input>
          </div>
          <!-- 用户名 -->
          <div class="search-item">
            <span class="labelName">用户名</span>
            <el-input
              clearable
              v-model="params.operName"
              class="search-input"
              style="width: 270px; height: 40px"
              placeholder="请输入用户名"
            ></el-input>
          </div>
          <!-- 登陆地址 -->
          <div class="search-item">
            <span class="labelName">登陆地址</span>
            <el-input
              clearable
              v-model="params.operIp"
              class="search-input"
              style="width: 270px; height: 40px"
              placeholder="请输入登陆地址"
            ></el-input>
          </div>
          <!-- 操作模块 -->
          <div class="search-item">
            <span class="labelName">操作模块</span>
            <el-select
              clearable
              v-model="params.title"
              class="search-input"
              style="width: 270px; height: 40px"
              placeholder="请选择"
            >
              <el-option
                v-for="item in modelTitleList"
                :key="item.title"
                :label="item.title"
                :value="item.title"
              />
            </el-select>
          </div>
          <!-- 操作事件 -->
          <div class="search-item">
            <span class="labelName">操作事件</span>
            <el-input
              clearable
              v-model="params.requestMethod"
              class="search-input"
              style="width: 270px; height: 40px"
              placeholder="请输入操作事件"
            ></el-input>
          </div>
          <!-- 操作时间 -->
          <div class="search-item">
            <span class="labelName">操作时间</span>
            <el-date-picker
              clearable
              v-model="params.operTime"
              class="search-time"
              style="width: 270px; height: 40px"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </div>

          <!-- 搜索按钮 -->
          <div class="search-button">
            <el-button :loading="loading" class="btn search" @click="getList"
              ><el-icon class="icon" color="#fff"> <Search /> </el-icon
              >搜索</el-button
            >

            <div class="btn reset" @click="resetSearch">
              <el-icon class="icon" color="rgba(43, 193, 123, 1)">
                <Refresh /> </el-icon
              >重置
            </div>
          </div>
        </div>
      </div>

      <!-- 表格数据 -->
      <el-table v-loading="loading" :data="logList" max-height="58vh">
        <el-table-column
          type="index"
          label="序号"
          :index="indexMethod"
          width="80"
          align="center"
        />
        <el-table-column
          label="操作人"
          prop="operName"
          :show-overflow-tooltip="true"
          min-width="80"
          align="center"
        />
        <el-table-column
          label="用户名"
          prop="operName"
          :show-overflow-tooltip="true"
          width="80"
          align="center"
        />
        <el-table-column
          label="操作时间"
          prop="operTime"
          :show-overflow-tooltip="true"
          min-width="80"
          align="center"
        />
        <el-table-column
          label="操作模块"
          prop="title"
          :show-overflow-tooltip="true"
          min-width="80"
          align="center"
        />
        <el-table-column
          label="操作事件"
          prop="requestMethod"
          min-width="80"
          align="center"
        />
        <el-table-column
          label="IP地址"
          prop="operIp"
          align="center"
          min-width="150"
        />
      </el-table>

      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="params.pageNum"
        v-model:limit="params.pageSize"
        @pagination="getList"
        class="pagination"
      />
    </div>
  </div>
</template>
<script>
export default {
  name: "Log",
};
</script>
<script setup>
import { onMounted, reactive, ref } from "vue";
import dayjs from "dayjs";
import { useRouter } from "vue-router";
import { getLogList } from "@/api/system/log";
import useFlightTaskStore from "@/store/modules/flightTask";

const router = useRouter();
const flightTaskStore = useFlightTaskStore();
const loading = ref(false);
const logList = ref([]);

const modelTitleList = reactive([
  {
    title: "空域查询",
  },
  {
    title: "空域设置",
  },
  {
    title: "空域类型",
  },
  {
    title: "空域申请",
  },
  {
    title: "飞行计划申请",
  },
  {
    title: "放飞申请",
  },
  {
    title: "放飞实施",
  },
  {
    title: "飞行计划统计",
  },
  {
    title: "违规飞行统计",
  },
  {
    title: "注册统计",
  },
  {
    title: "通知公告",
  },
  {
    title: "使用帮助",
  },
  {
    title: "报警设置",
  },
  {
    title: "用户信息",
  },
  {
    title: "机构信息",
  },
  {
    title: "设备信息",
  },
  {
    title: "个人信息",
  },
  {
    title: "账号管理",
  },
  {
    title: "成员管理",
  },
  {
    title: "角色管理",
  },
  {
    title: "部门管理",
  },
  {
    title: "职位管理",
  },
  {
    title: "操作日志",
  },
]);

// 搜索参数
const params = reactive({
  operName: null,
  title: null,
  operIp: null,
  requestMethod: null,
  operTime: null,
  pageNum: 1,
  pageSize: 10,
});
const total = ref(0);

// -----------------------------------  获取列表数据  ----------------------------------
const getList = async () => {
  try {
    loading.value = true;
    //  let {
    //    flyApplyCode,
    //    applicant,
    //    aircraftId,
    //    flyingHand,
    //    taskNature,
    //    flyingTime,
    //    pageNum,
    //    pageSize,
    //  } = params;
    //  if (flyingTime) {
    //    flyTime = dayjs(params.flyingTime[0]).format("YYYY-MM-DD");
    //    descendTime = dayjs(params.flyingTime[1]).format("YYYY-MM-DD");
    //  }
    const res = await getLogList(params);
    logList.value = res.rows;
    total.value = res.total;
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};

/**
 * @重置
 * */
function resetSearch() {
  params.operName = null;
  params.title = null;
  params.operIp = null;
  params.requestMethod = null;
  params.operTime = null;
  params.pageNum = 1;
  params.pageSize = 10;
  getList();
}

// -----------------------------------  页面跳转  ----------------------------------

const createNewApplication = (
  openType,
  flyApplyId,
  flyActionId,
  releaseStatus
) => {
  router.push({
    name: "EditExecutionDetail",
    query: { openType, flyApplyId, flyActionId, releaseStatus },
  });
};

// -----------------------------------  序号  ----------------------------------
function indexMethod(index) {
  // 当前页码
  const currentPage = params.pageNum;
  // 每页显示的数据条数
  const pageSize = params.pageSize;
  // 当前行的实际索引
  const truelndex = (currentPage - 1) * pageSize + index + 1;
  // 如果当前行的索引大于等于当前页的最大索引，
  // 则使用当前行的实际索引，否则使用当前行的原始索引
  return truelndex;
}

onMounted(() => {
  getList();
});
</script>

<style lang="scss">
.search-item .search-input .el-input,
.search-time .el-date-editor {
  height: 40px !important;
}
</style>

<style scoped lang="scss">
.flightExecution {
  width: 100%;
  height: 100%;

  .container {
    position: relative;
    width: calc(100% - 40px);
    height: 92%;
    margin: 0 20px 20px;
    border-radius: 10px;
    background: white;

    .pagination {
      position: absolute;
      left: 50%;
      bottom: 30px;
      transform: translateX(-50%);
    }
  }

  .search-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 30px 0;
    width: 100%;
    height: 155px;
    border-radius: 10px;
    background-color: #fff;
  }

  .search-argument {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    gap: 15px;

    .search-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 24%;
      height: 40px;

      .search-input {
        flex: 1;
        width: 270px;
        height: 40px;
      }

      .search-time {
        flex: 1;
        width: 270px;
        height: 40px;
      }
    }

    .labelName {
      width: 110px;
      text-align: right;
      font-size: 14px;
      margin-right: 15px;
    }

    .search-button {
      position: absolute;
      right: 0px;
      top: -45px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 160px;
      height: 40px;
    }
  }

  .tag {
    display: inline-block;
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 15px;
    color: rgba(153, 153, 153, 1);
    border: 1px solid rgba(153, 153, 153, 1);
  }
  .tag.primary {
    color: rgba(51, 151, 255, 1);
    border: 1px solid rgba(51, 151, 255, 1);
  }
  .tag.warning {
    color: rgba(255, 149, 18, 1);
    border: 1px solid rgba(255, 149, 18, 1);
  }
  .tag.success {
    color: rgba(43, 193, 123, 1);
    border: 1px solid rgba(43, 193, 123, 1);
  }

  .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 34px;
    padding: 10px;
    font-size: 14px;
    border-radius: 4px;
    user-select: none;
    cursor: pointer;
  }
  .btn.search {
    color: #fff;
    background: rgba(43, 193, 123, 1);
    &:hover {
      background: rgba(43, 193, 123, 0.85);
    }
  }

  .btn.reset {
    color: rgba(43, 193, 123, 1);
    background: rgba(43, 193, 123, 0.05);
    border: 1px solid rgba(43, 193, 123, 1);
    &:hover {
      background: rgba(43, 193, 123, 0.2);
    }
  }

  .btn.remove {
    color: rgba(255, 149, 18, 1);
    background: rgba(255, 149, 18, 0.05);
    border: 1px solid rgba(255, 149, 18, 1);
    &:hover {
      background: rgba(255, 149, 18, 0.2);
    }
  }

  .icon {
    margin-right: 6px;
  }
}
</style>
